<template>
	<view>
		<view class="address" @tap="$emit('editadress')" v-if="addType==1">
			<view class="adress_info" v-if="!addressId">
				<view class="address_icon">
					<image :src="Url+'add_images/sc-address.png'" mode="widthFix"></image>
				</view>
				<view class="address-right">
					<text>请选择收货地址</text>
					<i class="icon">&#xe637;</i>
				</view>
			</view>
			<view class="adress_info" v-else>
				<view class="address-flex">
					<view class="adress_info_name">
						<image :src="Url+'add_images/sc-address.png'" mode="widthFix"></image>
						{{address.name}} <text>{{address.mobile}}</text>
					</view>
					<view class="adress_info_detail">
						{{address.province}}{{address.city}}{{address.area}}{{address.address}}
					</view>
				</view>
				<i class="icon">&#xe637;</i>
			</view>
		</view>
		<view class="address-two" v-else>
			<view class="address-two_top">
				<image :src="Url+'add_images/sc-dianjia.png'" mode="widthFix"></image>
				<text>{{seller.province}}{{seller.city}}{{seller.area}}{{seller.address}}</text>
			</view>
			<view class="address-two_center">
				<text>商家电话：{{seller.mobile}}</text>
				<text></text>
				<text>取货时间：{{seller.start_time}} - {{seller.end_time}}</text>
			</view>
			<view class="address-two_bottom">
				预留电话：
				<text v-if="!phoneTrue" @tap="phoneFun">{{user.mobile}}</text>
				<input type="number" :focus="phonefocus" maxlength="11" v-else v-model="user.mobile" @blur="phoneFun"/>
				<image :src="Url+'add_images/sc-xie.png'" mode="widthFix"  @tap="phoneFun"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			address:{
				type:Object
			},
			addType:{
				type:Number,
				default:1
			},
			seller:{
				type:Object
			},
			user:{
				type:Object
			}
		},
		watch:{
			address(newVal,oldVal){
				if (this.address) {
					this.addressId = this.address.id;
				}
			}
		},
		data() {
			return {
				Url:this.Imgurl,
				phone:'13687502609',
				phoneTrue:false,
				phonefocus:false,
				addressId:0
			};
		},
		methods:{
			phoneFun(){
				this.phonefocus = !this.phonefocus;
				this.phoneTrue = !this.phoneTrue
			}
		}
	}
</script>

<style lang="less">
	.address-two{
		padding: 33upx 23upx;
		background-color: #FFFFFF;
		border-radius: 10upx;
		width: calc(100% - 30upx);
		margin: 20upx auto;
		box-sizing: border-box;
		.address-two_top{
			display: flex;
			align-items: center;
			justify-content: space-between;
			image{
				width:36upx;
				height: 36upx;
				margin-right: 15upx;
			}
			text{
				flex: 1;
				font-size: 24upx;
				color: #333333;
				line-height: 45upx;
			}
		}
		.address-two_center{
			font-size: 24upx;
			color: #999999;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin:20upx 0;
			text{
				&:nth-child(2){
					display: flex;
					align-items: center;
					&::after{
						content: "";
						display: block;
						height:30upx;
						width: 2upx;
						background-color: #999999;
					}
				}
			}
		}
		.address-two_bottom{
			height:55upx;
			font-size: 26upx;
			color: #333333;
			display: flex;
			align-items: center;
			text,input{
				color: #FF2842;
				width: 200upx;
				font-size: 26upx;
			}
			image{
				width:25upx;
				height: 30upx;
				// margin-left: 15upx;
			}
		}
	}
	.address {
		width: calc(100% - 30upx);
		margin: 20upx auto;
		background-color: #FFFFFF;
		border-radius: 10upx;
		padding:26upx 15upx 26upx 25upx;
		box-sizing: border-box;
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		.address-right{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28upx;
			padding-left: 20upx;
		}
		.address_icon {
			image {
				width:36upx;
				height:36upx;
			}
		}
		.adress_info {
			width: 100%;
			    display: flex;
			    align-items: center;
			    justify-content: space-between;
			.adress_info_name {
				font-size: 28upx;
				line-height: 28upx;
				color: #333333;
				margin-bottom: 28upx;
				display: flex;
				align-items: center;
				text {
					font-size: 24upx;
					color: #333333;
				}
				image{
					width: 36upx;
					height: 36upx;
					margin-right: 10upx;
				}
			}
			.adress_info_detail {
				font-size: 28upx;
				line-height: 28upx;
				color: #333333;
				position: relative;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				.icon {
					position: absolute;
					font-size: 28upx;
					color: #999999;
					right: 0;
					top: 0;
				}
			}
		}
	}
</style>
